<template>
    <div class="channel-wrap wrap">
        <!-- tag选择区域 -->
         <div class="shadow-box tl">
            <div class="channel-box">
                <div class="list flex">
                    <span class="tc">类型</span>
                   <div class="line">
                        <router-link :class="{'cur':tagName==''&&i==0||tagName==item}" :to="{name:'channel'}"  @click.native="change(0,item)" v-for="(item,i) in typeList" :key="i">{{item}}</router-link>
                   </div>
                </div>
                <div class="list">
                    <span class="tc">语言</span>
                    <div class="line">
                    <router-link :class="{'cur':language==''&&i==0||language==item}" @click.native="change(1,item)" to='' v-for="(item,i) in langList" :key="i">{{item}}</router-link>
                    </div>
                </div>
                <div class="list">
                    <span class="tc">年龄</span>
                    <div class="line">
                    <router-link :class="{'cur':sixList==''&&i==0||sixList==item}" @click.native="change(2,item)" :to="{name:'channel'}" v-for="(item,i) in sexList" :key="i">{{item}}</router-link>
                    </div>
                </div>
                <div class="list">
                    <span class="tc">特点</span>
                    <div class="line">
                    <router-link :class="{'cur':hallmarks==''&&i==0||hallmarks==item}"  @click.native="change(3,item)" :to="{name:'channel'}" v-for="(item,i) in pointList" :key="i">{{item}}</router-link>
                    </div>
                </div>
                
               
                 <div class="list">
                    <span class="tc">状态</span>
                    <div class="line">
                    <router-link @click.native="changeLine(1)" :class="{'cur':onLine}" :to="{name:'channel'}">在线</router-link>
                    <router-link @click.native="changeLine(2)"  :class="{'cur':!onLine}" :to="{name:'channel'}" >提前预约</router-link>
                    <!-- <router-link :class="{'cur':onLine}" :to="{name:'channel'}" v-for="(item,i) in moreList" :key="i">{{item}}</router-link> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索结果区域 -->
        <div class="channel-res flex">
            <!-- <div class="box" v-for="item in listData" :key="item._id">
                <router-link :to="{name:'detail',query:{name:item.name}}">
                      <el-image 
                            class="img"
                            :src="item.preImg"
                            fit="cover"></el-image>
                </router-link>
                <p class="tl name">
                    <router-link class="sign-colon" :to="{name:'detail',query:{name:item.name}}">
                    {{item.name}}
                    </router-link>
                     <span  class="tl sub sign-colon">
                    {{item.commendInfo}}
                    </span>
                </p>
               
            </div> -->
             
            <div class="video-pre flex"  @mouseleave="hidePre()">
                    <div class="pre-box" v-show="!item.hideLine" v-for="(item,i) in listData" :key="i">
                        <!-- 预览图 -->
                        <div class="pre-img tl">
                            <router-link  to="path:'/home'"  >
                                <el-image ref="preImg" class="img" @mouseenter="showPre(i)"  :src="item.preImg"
                            fit="cover"></el-image>
                            </router-link>
                            <router-link class="pre-name" :to="{path:'/play',query:{data:JSON.stringify(item)}}">
                                {{item.name}} 
                            </router-link>
                            <span class="des sign-colon">
                                {{item.commendInfo}}
                            </span>
                        </div>
                        <!-- 预览视频 -->
                         <div class="pre-video"  v-show="preIndex===i"  @mouseleave="hidePre(i)">
                            <router-link  :to="{name:'play',query:{data:JSON.stringify(item)}}" >
                                <video autoplay="autoplay"  muted="true" :src="item.preVideo"></video>
                            </router-link>
                            <!--  -->
                            <i class="el-icon-bell"  @click="giveVolume" v-show="!isOperate"></i>
                            <i class="el-icon-message-solid"  @click="closeVolume" v-show="isOperate"></i>
                            <router-link  :to="{name:'detail',query:{name:item.name}}">
                                <h3>
                                    {{item.name}}
                                </h3>
                            </router-link>
                             <p class="des tl ">
                               <el-tag type="info" size="small">{{new Date(item.created_at).getFullYear()}}</el-tag>
                               <el-tag type="info" size="small" v-if="item.tags[0]">{{item.tags[0].name}}</el-tag>
                            </p>
                          
                            <p class="des des-pre tl more-colon">
                               简介:  {{item.des}}
                            </p>
                             
                               <router-link :to="{name:'play',query:{data:JSON.stringify(item)}}" class="go-play">
                              <el-tag type="success">立即播放</el-tag>
                              </router-link>
                         </div>
                    </div>

                    
                </div>

        </div>
        <!-- 分页数 -->
        <div class="block">
            <el-pagination
                @current-change="changePage"
                :current-page.sync="curPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.go-play {
    position: absolute;
    right: 15px;
}
// 视频预览
.video-pre {
    margin-top:20px;
    width:1215px;
  justify-content: flex-start;
  .pre-box {
    position: relative;
    width: 185px;
    margin-right:15px;
    margin-bottom:40px;
    .pre-img {
      position: relative;
      .img {
        width:100%;
        height: 259px;
      }
      .pre-name {
        margin-top: 10px;
        display: block;
        color: #333;
        font-weight:700;
      }
      .des {
        font-size: 13px;
        color: #999;
      }
    }
    .pre-video {
      position: absolute;
      width: 120%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      z-index: 9;
      background: #fff;
      box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
      video {
        width: 100%;
        height: 50%;
        background: #000;
      }
      i {
        position: absolute;
        z-index: 9;
        top: 135px;
        right: 10px;
        font-size: 20px;
        color: #fff;
      }
      h3 {
        margin: 10px auto 10px;
        font-size: 18px;
        font-weight: 700;
        color: #202020;
      }
      .des {
        margin-bottom: 5px;
        padding: 0 15px;
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
}


.channel-wrap {
  overflow: hidden;
  margin-top: 70px;
  justify-content: flex-start;
  .channel-box {
    padding: 0 20px;
    .list {
      // tag标志
      position: relative;
      margin-bottom: 10px;
      padding-left: 70px;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: flex-start;
      .line {
        min-height: 40px;
        border-bottom: 1px solid #eee;
      }
      span {
        position: absolute;
        left: 0;
        top: 2px;
        width: 50px;
        margin-right: 20px;
        padding: 0 5px;
        border-radius: 16px 0 16px 16px;
        background-color: #7f7f8b;
        color: #fff;
        line-height: 32px;
        text-align: center;
      }
      .cur {
        background-color: #f7eae8;
        color: #ff5c38;
        font-weight: 700;
      }
      a {
        display:inline-block;
        margin: 2px 0;
        padding: 0 10px;
        border-radius: 15px;
        color: #999;
        line-height: 28px;
        vertical-align: top;
        &:hover {
         color: #ff5c38;
        }
      }
    }
  }
//   搜索结果区域
  .channel-res {
      margin-top:20px;
      width:1215px;
      padding-left:15px;
      flex-wrap:wrap;
      justify-content: flex-start;
    .box {
        margin-bottom:40px;
        width:185px;
        margin-right:15px;
        .img {
            width:100%;
            height:259px;
            background: #000;
        }
        .name {
            margin:15px auto 10px;
            a {
                margin-bottom:4px;
                display:block;
                font-weight: 700;
                color:#111;
                &:hover {
                color:#ff5c38
                }
            }
             .sub {
                font-size: 13px;
                line-height: 20px;
                color:#666;
            }
        }
       
    }
  }
}
</style>
<script>
import $ from "jquery";
import { findVideo,searchType } from "../api/index";
export default {
  data() {
    return {
      onLine:true,
         //   视频预览
      preIndex: "",
      //   是否交互过
      isOperate: false,
        typeList:['全部','主推榜','微电影','动画','游戏','视频特效','图片设计','娱乐资讯','音频后期','广告配','专题','飞碟说','舌尖体','暴漫体','网红代言'],
        pointList:'全部,阳刚,磁性,可爱,阳光,土气,呆萌,妩媚,虚弱,元气,苍老,浑厚大气,领导范,甜美,新闻,反派'.split(','),
        sexList:'全部,男童,童女,少年男,少年女,青年男,青年女,中年男,中年女,老年男,老年女'.split(','),
        langList:'全部,国语,英语,日语,东北话,天津话,上海话,四川话,粤语,台湾腔,特殊音'.split(','),
        // moreList:'在线,需要预约'.split(','),
        curPage:1,
        total:25,
        curPage:1,
        pageSize:18,
        kw:'',
        listData:[],
        total:0,
        tags:'',
        // 年龄
        sixList: '',
        // 特点
        hallmarks: '',
        // 分类id
        tagName:'',
        // 名字
        name:'',
        language:'',
    };
  },
  methods:{
    changeLine(i) {
      this.onLine=i===1?true:false;
      // 筛选数据 参与存在一个false的取消显示
        //下线人员
      if(this.onLine) {
        // 隐藏下线的
        this.listData.forEach((ele,i)=>{
          // 重置
          ele.hideLine=false;
          ele.roles.forEach((ele2,j)=>{
            if(!ele2.status) {
              ele.hideLine=true;
            }
          })
       })
      }else{
        this.listData.forEach((ele,i)=>{
          // 重置
          // 隐藏全部在线的
          ele.hideLine=!ele.hideLine;
      })
      }
    },
    change(i,e) {
         if(i==0) {
            if(e=='全部') {
                this.tagName='';
            }else{
            this.tagName=e;
            }
        }
        if(i==1) {
            if(e=='全部') {
                this.language='';
            }else{
            this.language=e;
            }
        }
        if(i==2) {
            if(e=='全部') {
                this.sixList='';
            }else{
            this.sixList=e;
            }
        }
        if(i==3) {
            if(e=='全部') {
                this.hallmarks='';
            }else{
            this.hallmarks=e;
            }
        }
        this.changePage();
    },
    changePage() {
    const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
      findVideo({
        name:this.name,
        tagName:this.tagName,
        sexName:this.sixList,
        hallmark:this.hallmarks,
        page: this.curPage-1,
        pageSize: this.pageSize,
        language:this.language
      }).then(res=>{
          loading.close();
        this.listData=res.data.data;
        // 处理在线的 fix
        // this.changeLine(1);
        this.total=res.data.total;
      }).catch(err=>{
          loading.close();
        console.log(err)
      });
    },
    // 获取分类列表
     getType(type) {
      searchType({
        page: 0,
        pageSize:20
      }).then(res => {
         this.typeList=res.data.data;
        })
        .catch(err => {
          this.listLoading = false;
          console.log(err);
        });
    },
    // 视频预览
    showPre(i) {
      this.preIndex = i;
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      // if(preVideo.querySelector('.el-icon-close').style.display=='none') {
      this.volumeSwitch(1);
      // }
      setTimeout(function() {
        preVideo.querySelector("video").play();
      }, 0);
      console.log(1);
    },
    hidePre(i, e) {
      // 取消播放
      // document.querySelectorAll('video').forEach((ele)=>{
      //   ele.muted=false;
      // })
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      document.querySelectorAll("video").forEach(ele => {
        ele.pause();
        console.log("cancel");
      }, 0);
      this.preIndex = "";
    },

    // 引导交互声音/video自动播放前提是静音
    giveVolume(e) {
      this.volumeSwitch(1);
    },
    closeVolume(e) {
      this.volumeSwitch(2);
    },
    // 改变声音
    volumeSwitch(i) {
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      if (i == 1) {
        // 开启声音
        preVideo.querySelector(".el-icon-message-solid").style.display =
          "block";
        preVideo.querySelector(".el-icon-bell").style.display = "none";
        preVideo.querySelector("video").muted = false;
        // preVideo.querySelector("video").autoplay = true;
      } else {
        // 关闭声音
        preVideo.querySelector(".el-icon-message-solid").style.display = "none";
        preVideo.querySelector(".el-icon-bell").style.display = "block";
        preVideo.querySelector("video").muted = true;
        // preVideo.querySelector("video").autoplay = false;
      }
    },
  },
  mounted(){
      this.changePage();
    //   this.getType();
  },
  created() {
      this.tagName=this.$route.query.tags?this.$route.query.tags:'';
  }
}
</script>
